<template>
  <div id="app">
    <header>
      <div class="title">Nature’s Immunity</div>
    </header>
    <div class="img">
      <img src="http://img.qdtech.ai/upload/decision/3c/02/3c0286ac0bf2a968b5fa257996941d59.jpg" alt="Immunity img">
    </div>
    <div class="desc">
      <p class="text">Facing skin problems like acne, rashes, itchiness that won’t go away?In our everyday lives, our skin is exposed to germs in the environment which take root and cause outbreaks of skin problems. Ordinary cleansers are often unable to eliminate these germs.</p>
      <p class="text">Nature Pure uses the most potent natural ingredients to reach inside your skin to gently cleanse it from germs. These natural ingredients and herbs will leave your skin purified from within, ensuring that germs cannot take root to cause acne, rashes or itchiness and leaving you with </p>
    </div>
    <div class="cleansers">
      <div class="cleansers-title">DISCOVER NATURE’S IMMUNITY CLEANSERS</div>
      <div class="img">
        <img src="http://img.qdtech.ai/upload/decision/97/98/979840cd3f5f60badbd113e8a402424a.jpg" alt="Immunity img">
      </div>
      <div class="bottom-section">
        <div class="weight">NATURE’S IMMUNITY CLEANSING BARS 90G</div>
        <div class="feature">Boosts your skin’s immunity against most skin problems</div>
        <div class="price">Rp 45,000</div>
        <div class="select-box">
          <el-select class="select-clean" v-model="value" placeholder="请选择">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.label">
            </el-option>
          </el-select>
        </div>
        <div class="btn">Add to cart</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import HelloWorld from './components/HelloWorld'
import slotStudy from './components/slotStudy.vue'
import {api} from './lib/api.js'
import {getUrlParam} from './lib/util'
import util from './lib/util'
import landpage from './mixins/landpage.js'

export default {
  mixins: [landpage],
  name: 'App',
  data () {
    return {
       options: [
        {
          label: 'Cleansing bar with Calamine'
        },
        {
          label: 'Cleansing bar with Tea Tree Oil'
        },
        {
          label: 'Cleansing bar with Turmeric'
        }
      ],
        value: 'Cleansing bar with Calamine'
    }
  },
  components: {
  },
  mounted () {
    console.log([1, 2, 'fanfan'].find(item => item === 'fanfan'))
  },
  methods: {
  }
}
</script>

<style lang="less">
@import './assets/css/common';
.text-overflow() {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.box {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: red;
  .word {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
}

#app {
  font-family: Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  font-size: 15px;
  padding-bottom: 50px;
  header {
    position: relative;
    height: 100px;
    text-align: center;
    .title {
      position: absolute;
      right: 0;
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      font-size: 24px;
      height: 40px;
      line-height: 40px;
      color: #333;
    }
  }
  .img {
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .desc {
    padding: 48px 17px 14px;
    font-size: 15px;
    line-height: 24px;
    color: #666;
    p {
      margin: 0;
      margin-bottom: 16px;
    }
  }
  .cleansers {
    .cleansers-title {
      padding: 5px 14px;
      text-align: center;
      font-size: 15px;
      color: #333333;
    }
    .img {
      height: 200px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .bottom-section {
      padding: 0 20px;
      line-height: 20px;
      text-align: center;
      .weight {
        padding-bottom: 4px;
        color: #333;
      }
      .feature {
        text-align: center;
        color: #999;
      }
      .price {
        padding: 30px 0 34px;
        color: #333333;
        font-size: 30px;
        font-weight: bold;
      }
      .select-clean {
        width: 100%;
      }
      .btn {
        margin-top: 20px;
        height: 50px;
        line-height: 50px;
        border-radius: 24px;
        font-size: 18px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        background-color: #8eb86a;
        background: -webkit-linear-gradient(left, #b8da86 , #548942); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #b8da86, #548942); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #b8da86, #548942); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #b8da86 , #548942); /* 标准的语法（必须放在最后） */
      }
    }
  }
}
</style>
